<template>
  <div id="area" >

    <div  class="echart" id="mychart" :style="{ width: '98%', minHeight: '400px' }"></div>

    <div class="pagination" style="align-self: flex-end">
      <el-pagination
        v-show="pagination.total>0"
        :current-page.sync="pagination.currentPage"
        :page-size.sync="pagination.pageSize"
        :layout="layout"
        :page-sizes="pagination.pageOptions"
        :total="pagination.total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  // import searchTablePagination from "./searchTable/searchTablePagination"
  import domain from '../../../domain.js'
  import * as echarts from "echarts";
  const base = domain.target
  export default {
    name: 'reportTable',
    components: {

    },
    created () {
      console.log("created")
    },
    mounted() {

      this.getListCharts()
      this.$nextTick(()=>{
          window.addEventListener("resize", () => {
            let myChart = document.getElementById('mychart');
            myChart.resize();
          });
      })
    },
    activated() {
      console.log("activated")
    },
    data () {
      return {
        url:`${base}/join/reports/list/plan/passRate`,

        sourceList:[
          {
            textName:"local",
            value:"local"
          },
        ],
        colorList:["rgba(0,255,0,.5)","rgba(255,153,204,.5)","rgba(51,204,204,.5)"],
        layout:'total, sizes, prev, pager, next, jumper',
        pagination: {
          total: 0, // 总数
          pageSize: 8, // 页面多少条数据
          currentPage: 1, // 当前在哪页
          pageOptions: [5, 8,10]// 页面选项
        },
        option: {
          backgroundColor:"rgba(0,0,255,.1)",
          title: {
            text: '测试计划通过率'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          // legend: {},
          grid: {
            left: '6%',
            right: '6%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            // boundaryGap: [0, 0.01]
            max: 1.2,

          },
          yAxis: {
            type: 'category',
            data: []
          },
          series: [
            {
              name: '通过率',
              type: 'bar',
              barWidth :'20px',
              label: {
                show: true,
                position: 'right',
                fontSize:20,
                color:"#000"
              },
              // showBackground: true,
              data: []
            },
          ],
         /* dataZoom: [
            {
              type: 'inside'
            }
          ],*/
        }


      }
    },
    methods: {

      getListCharts(){

        let params = {
          pageSize: this.pagination.pageSize,
          pageNum: this.pagination.currentPage,
        }

        this.$get(this.url, {params}).then(res => {
            if (res&& res.data.code ==20000){
              this.pagination.total = res.data.obj.navigatePages*1
              let List = res.data.obj.list;
              let x = []
              let y = []
              List.forEach((item)=>{
                for (const key in item) {
                  x.push(key)
                  y.push(item[key]*1)
                }
              })


              if (y.length>0){
                y = y.map((item,index)=>{
                  let i = index%3
                  return {
                    value:item,
                    itemStyle: {


                      normal: {
                        color: this.colorList[i], // 阴影颜色
                        shadowBlur: 10, // 阴影模糊度
                        shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色
                        shadowOffsetX: 5, // 阴影水平偏移
                        shadowOffsetY: 5 // 阴影垂直偏移
                      }
                    }
                  }
                })
              }
              this.option.yAxis.data = x
              this.option.series[0].data = y
              let chartDom = document.getElementById('mychart');
              let myChart = echarts.init(chartDom);
              this.option && myChart.setOption(this.option);
            }
        }).catch(()=>{})
      },
      handleSizeChange(val) {
        console.log(val)
        this.pagination.currentPage = 1
        this.pagination.pageSize = val
        console.log(this.currentPage)
        this.getListCharts()

      },

      handleCurrentChange(val) {
        console.log(val)
        this.pagination.currentPage = val
        this.getListCharts()

      },

    },

    computed: {

    },
    watch: {

    },
  }

</script>

<style scoped lang="scss">
  #area{
    width: 100%;
    margin:20px auto;
    min-height: 100vh;
    /*border: 1px solid #e8e8e8;*/
    border-radius: 5px;

  }
  .echart{
    width: 100%;
    min-height: 400px;
    border-radius: 5px;
    box-shadow: 3px 3px 5px 5px rgba(224, 200, 209, .5);
  }
</style>
